<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  div {
    width: 200px;
    height: 200px;
    margin: 20px;
    float: left;
    background: red;
    opacity: 0.3;
    filter: alpha(opacity:30);
  }
</style>
<script>
  //let alpha = 30

  window.onload = function () {
    let divs = document.getElementsByTagName("div")
    for (let i = 0; i < divs.length; i++) {
      const item = divs[i];
      item.alpha = 30
      item.onmouseover = function () {
        startMove(this, 100)
      }
      item.onmouseout = function () {
        startMove(this, 30)
      }
    }

  }

  function startMove(obj, target) {
    clearInterval(obj.timer)
    obj.timer = setInterval(() => {
      let speed = (target - obj.alpha) / 6
      speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)
      if (obj.alpha == target) {
        clearInterval(obj.timer)
      } else {
        obj.alpha = obj.alpha + speed
        obj.style.opacity = obj.alpha / 100
      }
    }, 30);

  }
</script>

<body>
  <div></div>
  <div></div>
  <div></div>

</body>

</html>